<template>
  <div class="tongue-diagnosis">
    <h1>中医诊断</h1>
    <div class="patient-info">
      <img :src="patientImageUrl" alt="Patient Image">
      <p>临床症状表现为面部性格急躁、易怒、烦躁不安、情绪波动较大，在睡眠方面，您可能出现心烦难入睡。</p>
    </div>
    <div class="symptoms">
      <h2>临床症状特征信息</h2>
      <ul>
        <li>面色：黄</li>
        <li>苔色：紫暗</li>
        <li>舌苔颜色：黄</li>
        <li>舌质颜色：淡红</li>
      </ul>
    </div>
    <div class="recommendation">
      <h2>推荐使用</h2>
      <p>橘皮菊花茶</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 假设的图片URL，实际应替换为真实图片地址
      patientImageUrl: 'https://example.com/path/to/patient.png',
    };
  },
};
</script>

<style scoped>
.tongue-diagnosis {
  /* 样式定义 */
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.patient-info img {
  width: 100px; /* 或你需要的尺寸 */
  height: auto;
  margin-right: 20px;
  float: left;
}

.symptoms ul {
  list-style-type: none;
  padding: 0;
}

.symptoms li {
  margin: 5px 0;
}

.recommendation {
  margin-top: 20px;
}
</style>
